<template>
    <div class="container animated fadeIn">
      <ul class="container--address">
        <li class="container--address__information">
          <span class="container--item__name">收货人</span>
          <input type="text" placeholder="请填写收货人姓名"
                 @keydown="nameShow"
                 @focus="nameFocusShow"
                 @blur="nameVanish"
                 v-model="name"
                 class="container--address__name">
          <img src="../assets/register/error.png"
               class="container--img__error"
               @click="nameClick"
               v-show="nameDltBoole" alt="#">
        </li>
        <li class="container--address__information">
          <span class="container--item__name">手机号码</span>
          <input type="tel" placeholder="请填写手机号码"
                 @keydown="tellShow"
                 @focus="tellFocusShow"
                 @blur="tellVanish"
                 v-model="tell" class="container--address__name">
          <img src="../assets/register/error.png"
               class="container--img__error"
               @click="tellClick"
               v-show="tellDltBoole" alt="#">
        </li>
        <li class="container--address__information" @click="maskShow">
          <span class="container--item__name">所在地区</span>
          <span class="container--address__name spanText"
                ref="spanText">请选择</span>
        </li>
        <li class="container--address__detailedAddress">
          <div class="container--item__detailedAddress">详细地址</div>
          <input type="text" placeholder="街道楼号" v-model="deta"
                 class="container--detailedAddress__deta">
        </li>
      </ul>
      <div class="container--item__btn" @click="saveData">保存</div>
      <div :class="['container--item__mask', 'animated', maskMove]"
           v-show="maskBoole" @click.self="masAct">
        <div :class="['container--item__select', 'animated', cityMove]">
          <ul class="container--item__box">
            <li class="container--box__list">所在地区
            <span class="container--list__shut" @click="offMask">关闭</span>
            </li>
            <li class="container--box__select">
              <span class="container--text__province" ref="province" @click="province"></span>
              <span class="container--text__city" ref="city" @click="optionCity"></span>
              <span class="container--text__select" ref="opiton">请选择
              </span>
            </li>
            <li class="container--item__betterScroll">
            <div class="container--betterScroll">
              <div class="container--box__area"
                   v-for="(item, key) of areaMessage"
                   v-if="item.name !== '市辖区'"
                   @click="option(item, key)"
                   :key="key">
                <span>{{item.name}}</span>
              </div>
            </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="container--item__popup animated fadeIn" v-show="popupBoole">
        <div class="container--popup__mask  animated fadeInDown">
          <div class="circular">!</div>
          <img src="../assets/receivingAddress/close.png" alt="#" @click="off">
          <div class="container--text__msg">
            <span class="container--text__tips">提示</span>
            <span class="container--text__ok">收获地址保存成功</span>
          </div>
          <div class="container--item__btns" @click="backWarehouse">确定</div>
        </div>
      </div>
    </div>
</template>

<script>
export default {
  name: 'addRess',
  data() {
    return {
      name: '',
      tell: '',
      deta: '',
      popupBoole: false,
      nameDltBoole: false,
      tellDltBoole: false,
      ctxId: null,
      maskMove: 'fadeIn',
      cityMove: 'fadeInUpBig',
      betterScroll: null, // 滚动栏
      areaMessage: null, // 总信息
      areaMessageDuplicate: null, // 总信息副本
      cityMessage: null, // 城市信息
      area: null, // 区信息
      maskBoole: false, // 遮罩,
      listNum: 0, // 循环数据box点击次数
      maskNum: 0, // mask点击次数
    };
  },
  methods: {
    /* eslint-disable*/
    nameShow() {
      this.nameDltBoole = true;
    },
    tellShow() {
      this.tellDltBoole = true;
    },
    nameFocusShow() {
      if (this.name) this.name.length > 0 ? this.nameDltBoole = true : '';
    },
    tellFocusShow() {
      if (this.tell) this.tell.length > 0 ? this.tellDltBoole = true : '';
    },
    nameVanish() {
      this.nameDltBoole = false;
    },
    tellVanish() {
      this.tellDltBoole = false;
    },
    nameClick() {
      this.name = '';
    },
    tellClick() {
      this.tell = '';
    },
    // 发送用户地区信息
    saveData() {
      if (this.name && this.tell && this.$refs.spanText.innerHTML && this.deta) {
        this.popupBoole = true;
        if (this.ctxId) {
          this.$api.resetShippingAddress({
            addrid: this.ctxId,
            receiver: this.name,
            phoneNumber: this.tell,
            location: this.$refs.spanText.innerHTML,
            details: this.deta,
          })
            .then((data) => {
              console.log(data);
            })
            .catch((error) => {
              console.log(error);
            })
        } else {
          this.$api.customerAddress({
            receiver: this.name,
            phoneNumber: this.tell,
            location: this.$refs.spanText.innerHTML,
            details: this.deta,
          })
            .then((data) => {
              console.log(data);
            })
            .catch((error) => {
              console.log(error);
            });
        }
      } else {
        this.$popUp({
          message: '请完善信息',
        });
      }
    },
    backWarehouse() {
      this.$router.push({ name: 'addressWarehouse', params: { data : 0 } });
    },
    off() {
      this.$router.push({ name: 'addressWarehouse' });
    },
    masAct() {
      this.maskBoole = false;
      this.maskNum = 0;
    },
    // 点击关闭遮罩
    offMask() {
      setTimeout(() => {
        this.maskBoole = false;
        this.maskNum = 0;
      }, 300);
      this.cityMove = 'fadeOutDown';
      this.maskMove = 'fadeOut';
    },
    // 点击选择地区 获取信息 控制次数
    maskShow() {
      this.cityMove = 'fadeInUpBig';
      this.maskMove = 'fadeIn';
      this.maskNum++; // 每次点击+1
      if (this.maskNum === 2) { // 是否关闭后再次打开选择器
        if (this.listNum >= 2) { // 点击次数大于等于2时 此时为选择最后一层时的状态
          this.listNum = 2;// 重新赋值 防止关闭后 再次进入选择器修改
        } else {
          this.listNum = 1; // 此时是选择第二层的状态
        }
      }
      this.maskBoole = true; // 点击显示遮罩
    },
    option(item, key) {
      this.listNum++; // 每次点击list点击次数+1
      /*
      * 第一次点击时： -------------------
      * 判断是否为行政区： 直接弹出遮罩 且渲染用户地址信息 【不用预留第一层信息】
      * 渲染第二层地区信息： --------------
      * 判断是否为市辖区：
      * 是： 直接取市辖区的第二层 设置第一层头信息 存储城市信息
      * 否： 渲染第二层界面 设置第一层头信息 存储城市信息
      * 第二次点击时： -----------------------------------
      * 市辖区 ：退出遮罩 存储区信息 渲染用户地址信息
      * 非市辖区：渲染最后一层地区信息 设置城市头信息  存储区信息
      * 第三次点击时： 渲染用户地址信息 退出遮罩 清空点击选择器点击次数
      * */
      if (this.listNum === 1) { // 第一次点击 表示第一层 市的选取
        if (!this.areaMessage[key].pchilds[0]) { // 判断行政区
          this.cityMove = 'fadeOutDown';
          this.maskMove = 'fadeOut';
          this.$refs.spanText.innerHTML = item.name; // 渲染用户地址信息
          setTimeout(() => {
            this.maskBoole = false; // 退出遮罩
          }, 300);
          this.listNum = 0; // 退出遮罩后退出清零 准备用户再次点击修改时 循环
          this.maskNum = 0; // 退出遮罩后退出清零 准备用户再次点击修改时 循环
          this.areaMessage = this.areaMessageDuplicate; // 复制第一级副本 预留 二次进入获取到第一级内容
        } else if (this.areaMessage[key].pchilds.length === 1) { // 判断是否为市辖区
          this.areaMessage = this.areaMessage[key].pchilds[0].cchilds; // 直接取市辖区的第二层
          this.$refs.province.innerHTML = item.name; // 第一层选择 头信息
          this.cityMessage = this.areaMessage; // 存储城市信息
        } else {
          this.areaMessage = this.areaMessage[key].pchilds; // 渲染第二层界面
          this.$refs.province.innerHTML = item.name; // 第一层选择 头信息
          this.cityMessage = this.areaMessage; // 存储城市信息
        }
      } else if (this.listNum === 2) { // 第二次点击时 需判断上一层是否渲染的是市辖区
        if (this.areaMessage[key].cchilds) { // 非市辖区
          this.areaMessage = this.areaMessage[key].cchilds; // 渲染最后一层地区信息
          this.$refs.city.innerHTML = item.name; // 设置城市头信息
          this.area = this.areaMessage; // 存储区信息
        } else { // 市辖区
          this.cityMove = 'fadeOutDown';
          this.maskMove = 'fadeOut';
          this.$refs.spanText.innerHTML = `${this.$refs.province.innerHTML} ${item.name}`; // 渲染用户地址信息
          setTimeout(() => {
            this.maskBoole = false; // 退出遮罩
          }, 300);
          this.listNum = 0; // 退出遮罩后退出清零 准备用户再次点击修改时 循环
          this.maskNum = 1; // 控制点击次数为2 准备用户二次点击
          this.area = this.areaMessage; // 存储区信息
        }
      } else { // 点击次数大于两次时 此时所有信息选择完毕
        this.cityMove = 'fadeOutDown';
        this.maskMove = 'fadeOut';
        this.$refs.spanText.innerHTML = `${this.$refs.province.innerHTML} ${this.$refs.city.innerHTML} ${item.name}`; // 渲染用户地址信息
        setTimeout(() => {
          this.maskBoole = false; // 退出遮罩
        }, 300);
        this.maskNum = 0; // 清空点击选择器点击次数
      }
    },
    province() { // 省信息头点击的时候
      this.areaMessage = this.areaMessageDuplicate; // 渲染省信息
      this.$refs.province.innerHTML = null; // 清空省选择头信息
      this.$refs.city.innerHTML = null; // 清空市选择头信息
      this.listNum = 0; // 回到初次点击时的状态
      this.maskNum = 0; // 回到初次点击时的状态
    },
    optionCity() { // 市选择头点击的时候
      this.areaMessage = this.cityMessage; // 渲染市信息
      this.$refs.city.innerHTML = null;// 清空市选择头
      this.listNum = 1; // 回到准备选择2次的状态 此时渲染的是第二层 市信息
    },
  },
  mounted() {
    this.$nextTick(() => {
      if (!this.betterScroll) {
        this.betterScroll = new this.$Bs('.container--item__betterScroll', {
          scrollX: false,
          scrollY: true,
          click: true,
        });
      } else {
        this.betterScroll.refresh();
      }
    });
    if (this.$route.params.data !== 1 && this.$route.params.data) {
      this.$refs.spanText.innerHTML =  this.$route.params.data.city
    }
  },
  created() {
    if (!this.areaMessage) { // 判断是否已经获取过信息 【没有获取信息的时候】
      this.$api.getProvinceMessage().then((data) => {
        this.areaMessage = data.data.data; // 给总信息赋值
        this.areaMessageDuplicate = data.data.data; // 保存副本
      }).catch((error) => {
        console.log(error);
      });
    }
    if (this.$route.params.data) {
      this.ctxId = this.$route.params.data.id;
      this.name = this.$route.params.data.name;
      this.tell = this.$route.params.data.tell;
      this.deta = this.$route.params.data.deta;
    }
  },
  updated() {
    if (isNaN(this.tell) && this.tell) this.tell = '';
    this.betterScroll.refresh();
  },
};
</script>

<style scoped lang="scss">
*{
    margin: 0;
    padding: 0;
    font-size: 0;
  }
.animated{
  animation-duration: .4s;
}
.container{
  .container--address{
    width: 100vw;
    list-style: none;
    .container--address__information{
      position: relative;
      border-bottom: 1px solid #ccc;
      box-sizing: border-box;
      margin-left: .34rem;
      height: 1.3333333rem;
      .container--item__name{
        position: absolute;
        font-size: .34rem;
        font-weight: 300;
        line-height: 1.3333333rem;
      }
      .container--img__error{
        width: .4rem;
        height: .4rem;
        position: absolute;
        right: .613333333rem;
        top: .46666665rem;
      }
      .container--address__name{
        line-height: 1.3333333rem;
        outline:none;
        border-width:0;
        height: 100%;
        width: 74%;
        font-size: .32rem;
        margin-left: 24%;
      }
      .container--address__name::-webkit-input-placeholder{
        color: #d5d5d5;
      }
      .spanText{
        color: #bbbbbb;
      }
    }
    .container--address__detailedAddress{
      border-bottom: 1px solid #ccc;
      box-sizing: border-box;
      margin-left: .34rem;
      .container--item__detailedAddress{
        font-size: .34rem;
        font-weight: 300;
        line-height: 1.3333333rem;
      }
      .container--detailedAddress__deta{
        padding-bottom: .72rem;
        outline:none;
        border-width:0;
        width: 74%;
        font-size: .32rem;
      }
      .container--detailedAddress__deta::-webkit-input-placeholder{
        color: #d5d5d5;
      }
    }
  }
  .container--item__btn{
    position: absolute;
    left: 1.28rem;
    right: 1.28rem;
    top: 10rem;
    line-height: 1.066666rem;
    text-align: center;
    border-radius: 30px;
    background-color: #3c9dfc;
    color: #fff;
    font-size: .4266666rem;
    letter-spacing: 1px;
  }
  .container--item__btn:active{
    background-color: #338fe3;
  }
  .container--item__mask{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
    background: rgba(0,0,0,0.3);
    .container--item__select{
      position: absolute;
      bottom: 0;
      height: 11.5rem;
      width: 100vw;
      background: #fff;
      .container--item__box{
        width: 100vw;
        list-style: none;
        .container--box__list{
          font-size: .4rem;
          text-align: center;
          width: 100vw;
          line-height: 1.333333rem;
          border-bottom: 1px solid #ccc;
          font-weight: 400;
          .container--list__shut{
            position: absolute;
            right: .49333rem;
            font-size: .34rem;
            color: #a8a8a8;
          }
        }
        .container--box__select{
          position: relative;
          width: 100vw;
          height: 1.333333rem;
          border-bottom: 1px solid #ccc;
          font-weight: 400;
          .container--text__province{
            font-size: .4rem;
            line-height: 1.333333rem;
            margin-left: .5rem;
            margin-right: .5rem;
          }
          .container--text__city{
            font-size: .4rem;
            line-height: 1.333333rem;
            margin-right: .5rem;
          }
          .container--text__select{
            position: relative;
            left: 0;
            display: inline-block;
            line-height: 1.333333rem;
            font-size: .4rem;
            color: #46a2fd;
            border-bottom: 1px solid #46a2fd;
            box-sizing: border-box;
          }
          .animated{
            position: absolute;
            left: 1.68rem;
            bottom: .1rem;
            display: inline-block;
            width: .85rem;
            height: 2px;
            background-color: #46a2fd;
          }
        }
        .container--item__betterScroll{
          width: 100vw;
          height: 8.8rem;
          overflow: hidden;
          .container--betterScroll{
            width: 100vw;
            .container--box__area{
              line-height: 1.333333rem;
              border-bottom: 1px solid #ccc;
              margin-left: .7rem;
              span{
                font-size: .4rem;
                font-weight: 400;
              }
            }
          }
        }
      }
    }
  }
  .container--item__popup{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
    background: rgba(0,0,0,0.3);
    .container--popup__mask{
      position: absolute;
      left: .56rem;
      right: .56rem;
      bottom: 0;
      top: 0;
      margin: auto;
      border-radius: 5px;
      height: 4.466666666667rem;
      background-color: #fff;
      .container--item__btns{
        position: absolute;
        left: .666667rem;
        right: .666667rem;
        bottom: .666667rem;
        line-height: .9333333rem;
        text-align: center;
        border-radius: 30px;
        background-color: #3c9dfc;
        color: #fff;
        font-size: .4266666rem;
        letter-spacing: 1px;
      }
      .container--item__btns:active{
        background-color: #338fe3;
      }
      .circular{
        position: absolute;
        left: 0;
        right: 0;
        top: -4.5rem;
        bottom: 0;
        margin: auto;
        font-size: .4rem;
        width: 1.5rem;
        height: 1.5rem;
        line-height: 1.5rem;
        text-align: center;
        color: #fff;
        border-radius: 50%;
        background: url("../assets/receivingAddress/tips.png") no-repeat center #fff;
        background-size: 60%;
      }
      img{
        width: .5rem;
        height: .5rem;
        position: absolute;
        right: .35rem;
        top: .33333rem;
      }
      .container--text__msg{
        .container--text__tips{
          font-size: .4rem;
        }
        .container--text__ok{
          font-size: .4rem;
          color: #d5d5d5;
        }
        span{
          position: relative;
          top: .65rem;
          text-align: center;
          display: block;
          margin-top: .373333rem;
        }
      }
    }
  }
}
</style>
